import React from 'react'
import style from './ShoppingCart.module.css'
import {FiShoppingCart} from "react-icons/fi"
import {appContext} from '../AppState'

interface Props {
  
}
 
interface State {
  isOPen: Boolean
}
 
class ShoppingCart extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      isOPen: false
    }
  }

  handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    this.setState({isOPen: !this.state.isOPen})
  }

  render() {
    return (
      <appContext.Consumer>
        {(value) => {
          return (
          <div className={style.cartContainer}>
            <button onClick={this.handleClick} className={style.button}>
              <FiShoppingCart />
              购物车({value.shoppingCart.items.length})件
            </button>
            <div className={style.cartDropDown}
              style={{opacity: this.state.isOPen ? 1 : 0}}
            >
              <ul>
                {
                  value.shoppingCart.items.map(item => {
                    return <i>{item.name}</i>
                  })
                }
              </ul>
            </div>
          </div>
          )
        }}
      </appContext.Consumer>
    )
  }
}
 
export default ShoppingCart;